<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-button type="primary" @click="refreshMenuList">查询</el-button>
        </el-header>
        <el-main>
            <el-dialog v-model="dialogFormVisible" title="菜单" width="400">
                <el-form :model="menuModuleData.dataForm">
                    <el-form-item label="菜单名" label-width="100px">
                        <el-input v-model="menuModuleData.dataForm.menuName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="路由地址" label-width="100px">
                        <el-input v-model="menuModuleData.dataForm.routerUrl" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="备注" label-width="100px">
                        <el-input v-model="menuModuleData.dataForm.remark" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureSubmitMenu">确定</el-button>
                </div>
                </template>
            </el-dialog>
            <div>
                <el-button type="primary" @click="addMenu">添加</el-button>
            </div>
            <el-table :data="tableState.pageData.records" style="width: 100%">
                <el-table-column fixed="left" label="操作" min-width="100" v-slot="scope">
                    <el-button link type="primary" size="small" @click="editMenu(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteMenu(scope.row.id)">删除</el-button>
                </el-table-column>
                
                <el-table-column prop="menuName" label="菜单名字" min-width="100"></el-table-column>
                <el-table-column prop="routerUrl" label="路由" min-width="180"></el-table-column>
                <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
                <el-table-column prop="addTime" label="添加时间" min-width="120"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="120"></el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="tableState.pageData.pageNum"
                    v-model:page-size="tableState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="sizes, prev, pager, next"
                    :total="tableState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

    
</template>
<script lang="ts" setup name="MenuManage">

import { ref,reactive, onMounted } from 'vue'
import { getMenuListApi,addMenuApi,updateMenuApi,delMenuApi } from '@/http/api/menu/menu';
import { type MyResponseType } from '@/bean/base/response';
import { type MyPageParamType,MyPageResponseType } from '@/bean/base/page';
import { MenuModuleData, type MenuModule } from '@/bean/menu/AllMenuType';
import type { ComponentSize  } from 'element-plus';
import { MyPageData } from '@/bean/base/page';
import { ElMessage } from 'element-plus';

const dialogFormVisible = ref(false);


const menuModuleData = reactive(new MenuModuleData());


const pageParam:MyPageParamType = reactive({
    pageNum: 10,
    pageSize: 10
});

let tableState = reactive(new MyPageData<MenuModule>());


onMounted(() => {
    refreshMenuList();
})

//获取页面数据
async function refreshMenuList() {
    getMenuListApi(pageParam).then((res:MyResponseType<MyPageResponseType<MenuModule>>)=>{
        tableState.pageData = res.data;
    });
}



function sureSubmitMenu() {
    if(menuModuleData.dataForm.id  == null) {
        addMenuApi(menuModuleData.dataForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshMenuList();
        })
    } else {
        updateMenuApi(menuModuleData.dataForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshMenuList();
        })
    }
    
}



function addMenu() {
    menuModuleData.dataForm = new MenuModuleData().dataForm;
    dialogFormVisible.value = true;
}

const editMenu = (item:MenuModule) => {
  menuModuleData.dataForm = item;
  dialogFormVisible.value = true;
}


const deleteMenu = (id:Number) => {
    let tempParam = {id:id};
    delMenuApi(tempParam).then((res:MyResponseType<Object>)=>{
        if(res.code != 200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
    })
    refreshMenuList();
}



const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = (val: number) => {
    pageParam.pageSize = val;
    refreshMenuList();
}
const handleCurrentChange = (val: number) => {
    pageParam.pageNum = val;
    refreshMenuList();
}

</script>

<style scoped>


.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>